<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生列表页-分页版</title>
    <link href="/stylesheets/bootstrap.css" type="text/css" rel="stylesheet">
</head>

<body>
    <!-- 尖括号百分号等号： 渲染值。把基本类型的值取出插接到html源代码里 
        尖括号百分号： 括起来到是js语句。例如循环和if。
    -->
    <!-- 美化 -->
    <!-- 注意bootsrap.css的版本和导航代码要一致。3的文档配合4的代码显示不出来 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">学生管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">学生列表 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">添加学生</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#"></a>
                        <a class="dropdown-item" href="#"></a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"></a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <h3>学生列表</h3>
    <!-- 添加学生 -->
    <a href="/students/add">
        <button class='btn btn-info btn-large'>添加学生</button>
    </a>
    <!-- 学生列表 -->
    <table class="table table-striped">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
        <% students.forEach(function(stu, i){  %>
        <tr>
            <!-- stu  {_id:'', name:'小明'}  obj -->
            <td><%= stu.stuNo %></td>
            <td><%= stu.name %></td>
            <td><%= stu.age %></td>
            <td><%= stu.gender %></td>
            <!-- 虽然可以if判断把性别代码转换成字符串，但ejs的语法随着逻辑复杂会变得复杂容易写错，应该在后端处理好
                    <% if(stu.gender==1){ %><td>男</td><% }else{ %><td>女</td><% } %> -->
            <td><%= stu.phone %></td>
            <td><img src="<%= stu.avatarPath %>" width="50px;"></td>
            <td>
                <a href='/students/update/<%= stu._id %>'>
                    <button class="btn btn-warning">更新</button>
                </a>
                <!-- <a href='/students/delete?id=<%= stu._id %>'>删除</a> -->
                <a href='/students/delete/<%= stu._id %>'>
                    <button class="btn btn-danger">
                        <img src="/images/icons/delete.png">
                        <span class="glyphicon glyphicon-trash"></span>
                        删除
                    </button>
                </a>
            </td>
        </tr>
        <% }) %> 
    </table>

    <!-- 分页控件 
        <a href='/students/list2?pageno=1&pagenum=5'><button>1</button></a>
        每页条目和跳转到功能需要搭配js暂不实现。
        首页、上一页等功能需要后端回传pageno pagehasfirst等参数。
    -->
    <a href="/students/list2?pageno=1"><button>首页</button></a>
    <a href="/students/list2?pageno=<%= pageno-1 %>"><button>上一页</button></a>
    <%  for(var i=0; i<pageamount; i++){ %>
        <a href="/students/list2?pageno=<%= i+1 %>">
            <button><%= i+1 %></button>
        </a>
    <% } %>    
    跳转到：<input type='text' name=''>页
    每页<select><option>10</option></select>条
    <!-- 如果当前页已经是最后一页，那么下一页应该不可见，if page+1>pageamount -->
    <a href="/students/list2?pageno=<%= pageno+1 %>"><button>下一页</button></a>
    <a href="/students/list2?pageno=<%= pageamount %>"><button>尾页</button></a>
</body>

</html>